<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore ,useContextMenuStore} from "@/stores"
import {SongLengthToDateString} from "@/utils/date"
import LikeButton from "@/components/Controls/LikeButton.vue";
import MusicButtonList from "@/components/Controls/MusicButtonList.vue";
import PlayingIcon from "@/components/icons/PlayingIcon.vue";
import type {PropType} from "vue"
// import { eventBus } from "@/utils/eventBus"

const contextMenu = useContextMenuStore()

const props = defineProps({
  song:{
    required: true,
    type: Object as PropType<song_info>
  }
})
const playerStore = useAudioPlayerStore()
const handleDbClick =  (song: song_info) => {

  //设置音乐，参数二传是否立即播放
   playerStore.setPlayingSong(song,true)
}

const onContextMenu = (event: MouseEvent)=>{
  console.log("歌曲右键菜单")
  console.log(event,event.pageX,event.pageY)
  // eventBus.getName()
  //eventBus.on("APP_CONTEXT_MENU_REQUESTED",()=>{console.log("eventBus")})
  //eventBus.emit("APP_CONTEXT_MENU_REQUESTED",event.pageX, event.pageY)
  contextMenu.showAppContext(event.pageX,event.pageY)
}


</script>

<template>
  <dt  @dblclick="handleDbClick(song)" @contextmenu.prevent.stop="onContextMenu">
    <span class="song-name"><LikeButton :liked="song.liked" :song-id="song.id"></LikeButton><span class="name">{{song.title}}</span>
      <span class="btn-list">
      <MusicButtonList :played="!!(playerStore.status === PlayStatus.playing &&  playerStore.playingSong && playerStore.playingSong.id === song.id)" :song="song"></MusicButtonList>
    </span>
      <PlayingIcon v-if="playerStore.playingSong && playerStore.playingSong.id === song.id && playerStore.status === PlayStatus.playing"></PlayingIcon>
    </span>
    <span class="song-artist">{{song.album_artist_name}}</span>
    <span class="song-album">{{song.album_name}}</span>
    <span class="song-length">{{SongLengthToDateString(song.length)}}</span>
  </dt>
</template>

<style lang="scss" scoped>
.song-name {
  width: 433px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  position: relative;
  flex-grow: 2;

  .btn-list{
    display: none;
    position: absolute;
    right: 10px;
    //transform: translateY(-50%);
  }

  i{
    margin-left: 4px;
    color: #1ecf9d;
  }
}

.name{
  overflow: hidden;
  margin: 0 10px 0 12px;
  text-overflow: ellipsis;
  word-break:break-all;
}
.song-artist{
  width: 300px;
  flex-grow: 1;
  overflow: hidden;
  margin: 0 10px 0 0;
  text-overflow: ellipsis;
  word-break:break-all;
}
.song-album{
  width: 276px;
  flex-grow: 1;
  overflow: hidden;
  margin: 0 10px 0 0;
  text-overflow: ellipsis;
  word-break:break-all;
}
.song-length{
  width: 50px;
  flex-grow: 1;
}

dt{
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;
  font-size: 14px;
  color: black;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;

  &:hover{
    background-color: #efefef;
  }

  &.active{
    background-color: #efefef;
  }

  &.active .btn-list,
  &:hover .btn-list
  {
    display: block;
  }

}

</style>